<template>
  <view class="apply-item" @click="handleClick">
    <view class="left-line" :class="btnColor"></view>
    <view class="m-l-10" style="flex: 1">
      <view class="personnal">{{ applyItem.createName }}</view>
      <view>
        <text class="l-font-size">用车事由：{{ applyItem.reason }}</text>
        <text class="l-font-size">用车人数：{{ applyItem.peopleNum }}</text>
        <text class="l-font-size">开始时间：{{ applyItem.startTime }}</text>
        <text class="l-font-size">结束时间：{{ applyItem.overTime }}</text>
        <text class="l-font-size">车辆用途：{{ getCarType }}</text>
      </view>
    </view>
    <view class="m-r-10" v-if="current == 0">
      <button
        type="primary"
		style="margin-top: 10rpx"
        class="normal-btn apply-button"
        @click.stop="handleApply(applyItem.taskId, 1)"
      >
        审批
      </button>
      <!-- <button
        type="black"
        class="normal-btn apply-button"
        style="margin-top: 10px"
        @click="handleApply(applyItem.taskId, 2)"
      >
        拒绝
      </button> -->
    </view>
    <view class="btn-wrap" style="align-items: flex-end" v-else>
      <view
        class="normal-btn default-btn"
        :class="btnColor"
        >{{ statusText }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "ApplyItem",
  components: {},
  props: {
    applyItem: Object,
    current: Number,
  },
  data() {
    return {
		carUsing:[
			{value:1,label:'公司办公用车'},
			{value:2,label:'物流办公用车'},
			{value:3,label:'外出用车'},
			{value:4,label:'临时用车'},
			{value:0,label:'其他'},
		]
	};
  },
  computed: {
	getCarType(){
		let label = this.carUsing.filter(item=>{
			return this.applyItem.purpose ==item.value
		})
		if(label.length>0){
			return label[0].label
		} else {
			return ''
		}
	},
    statusText() {
      if (this.applyItem.status == 1) {
        return "进行中";
      } else if (this.applyItem.status == 2){
        return "已驳回";
      } else if (this.applyItem.status == 3){
        return "已完成";
      }
    },
    btnColor() {
      if (this.current === 0) {
        return "left-blue";
      } else {
        if (this.applyItem.status == 1||this.applyItem.status == 2) {
          return "left-red";
        } else {
          return "left-blue";
        }
      }
    },
  },
  watch: {},
  onLoad() {},
  methods: {
    handleClick() {
      uni.setStorageSync('taskDetail',this.applyItem)
      uni.navigateTo({
      	url:'/pages/approval'
      })
    },
    handleApply(taskId, status) {
      // let query = {
      //   taskId: taskId,
      //   status: status,
      // };
      // this.$emit("handle-approval", query);
	  uni.setStorageSync('taskDetail',this.applyItem)
	  uni.navigateTo({
	  	url:'/pages/approval?approval=1'
	  })
    },
  },
};
</script>

<style lang="scss">
.apply-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 10px 10px;
  background: #fff;
  position: relative;
  margin-bottom: 20px;
  .personnal {
    margin-bottom: 10px;
  }
  text {
    display: block;
    line-height: 18px;
  }
}
</style>
